Wstęp do CSS - część siódma

Podstawowe własności - czcionki

Wiele osób, które dopiero odkrywają CSS używa go właściwie tylko do określania własności czcionek. Chwali im się to, bo w ten sposób przestają korzystać z wielu znaczników, które są przestarzałe (ang. deprecated).

Określanie ustawieniami systemu

W CSS 2 istnieje możliwość dopasowania czcionki do indywidualnych ustawień interfejsu graficznego systemu osoby, która przegląda stronę. Wygląda to tak:

font: wartosc;

Dopuszczalne wartości to:

• caption
• icon
• menu
• message-box
• small-caption
• status-bar

Dzięki ich zastosowaniu, można zaprojektować stronę, która będzie przypominała wyglądem spersonalizowany interfejs użytkownika przeglądającego stronę.

Poszczególne własności

Określanie czcionki tylko przy pomocy kilku z góry już ustalonych wartości wydaje się być mało wystarczające. Na szczęście istnieje możliwość dość elastycznego wpływu na ustawienia czcionki.

Styl czcionki

Własność font-style definuje styl czcionki. Może ona być normalna, skośna oraz pochylona (normal, oblique, italic). Większość przeglądarek wartości oblique oraz italic traktuje tak samo i wyświetla czcionkę pochyloną.

Wariant czcionki

Własność font-variant pozwala na ustalenie sposobu w jaki wyświetlany jest tekst. Dopuszczalne wartości to normal, small-caps oraz oczywiście inherit. Ustawienie wartości normal spowoduje, że przeglądarka nie będzie modyfikować trybu wyświetlania. Ustawienie wartości inherit, która jest domyślna, spowoduje, że przeglądarka zastosuje tryb wyświetlania odziedziczony po rodzicu. Natomiast wartość small-caps spowoduje efekt następujący: DUŻE LITERY, małe litery, MiEsZaNe LiTeRy (DUŻE LITERY, małe litery, MiEsZaNe LiTeRy), czyli każda mała litera będzie zamieniona na wielką, ale wyświetlona w mniejszym rozmiarze.

Waga czcionki

Jak łatwo się domyślić, własność font-weight definiuje wagę (grubość) czcionki. Dopuszczalne wartości to: normal, bolder, bold, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900, inherit. Wartości liczbowe są na stałe określone i nie można używać innych. Wartość 100 jest odpowiednikiem wartości lighter, a każda wyższa wartość powoduje, że wyświetlana czcionka jest coraz grubsza. Odpowiednikiem liczbowym wartości normal jest 400, bolder - 700, a bold - 900. W praktyce przeglądarki graficzne interpretując ten styl zawężają zakres wyświetlania do czcionki pogrubionej lub nie. Wartości pośrednie są zaprojektowane "na wyrost", ale z pewnością znajdują zastosowanie w DTP.

Szerokości znaków

Własność font-stretch służy do określenia szerokości znaków. Dopuszczalne wartości to:

• ultra-condensed
• extra-condensed
• condensed
• semi-condensed
• normal
• semi-expanded
• expanded
• extra-expanded
• ultra-expanded
• wider
• narrower

Ponieważ przeglądarka internetowa to nie profesjonalny program do składu tekstu, użycie tych wartości nie ma wpływu na wygląd strony.

Wielkość czcionki

Nazwa własności font-size mówi sama za siebie. Własność ta służy do określania wielkości czcionki. Można tutaj używać kilku różnych typów wartości: wartości tekstowe absolutne (xx-small, x-small, small, medium, large, x-large, xx-large - od najmniejszej do największej), wartości tekstowe relatywne (smaller - mniejsza, larger - większa), wartości określane jednostkami (np. 2em, 1.4ex lub 22pt) oraz wartości procentowe.

Interlinia

Interlinia, to odstęp pomiędzy liniami tekstu. Własność definiująca interlinię to line-height. Dopuszczalnymi wartościami są wartości procentowe, wartości określane jednostkami, wartość słowna number oraz wartość liczbowa bez jednostki. Wartość taka ma postać 1.4, czyli jest to 1.4*aktualna wielkość czcionki. Jest to równoważne z wartością procentową 140%. Różnica pomiędzy nimi polega jedynie na dziedziczeniu - wartości procentowe nie są dziedziczone.

Rodzina czcionki

Własność font-family pozwala na określenie kroju czcionki lub rodziny czcionek. Do wyboru jest kilka wstępnie zdefiniowanych rodzin: serif, sans-serif, cursive, fantasy, monospace. Czcionka szeryfowa (serif) to na przykład Times, sans-serif to Helvetica, Arial, Verdana, cursive - m.in. Zapf Chancery, fantasy to czcionki fantazyjne, ozdobne, a czcionki monospace to oczywiście wszystkie czcionki o stałej szerokości znaku (m.in. Courier oraz wszystkie czcionki, które w nazwie mają "Mono"). Jak wcześniej wspomniałem własność font-family pozwala na określenie również konkretnego kroju czcionki, nie tylko całej rodziny, z której przeglądarka wybierze jeden krój. Kroje czcionek wymieniamy po przecinku, np.:

font-family: "Arial CE", Arial, Helvetica, sans-serif;

Taki zapis spowoduje, że przeglądarka będzie próbowała wykorzystać do wyświetlania czcionkę "Arial CE", jeśli jej nie znajdzie to czcionkę "Arial", a jeśli tej nie znajdzie to będzie próbowała wyświetlać tekst przy pomocy czcionki "Helvetica". Jednak, jeśli nie zostanie znaleziona żadna czcionka z tej grupy, przeglądarka wykorzysta własną czcionkę z rodziny sans-serif. Ważnym szczegółem jest użycie cudzysłowów - jeśli nazwa czcionki zawiera spację, należy nazwę tej czcionki ująć w cudzysłowy.

Forma skondensowana (skrótowa)

Czcionki można opisywać przy pomocy skrótowej własności font, która zawiera w sobie wszystkie pozostałe własności tutaj opisane (wartości typu caption czy menu są wartościami własności font ponieważ zawierają w sobie określenie wszystkich podwłasności). Składnia własności font złożonej z podwłasności font-* wygląda następująco:

font: font-style font-variant font-weight font-size/line-height
 font-family;

Wśród składników formy skrótowej nie ma własności font-stretch, więc żeby zmienić jej wartość należy użyć jej oddzielnie. Pomiędzy wielkością czcionki, a interlinią powinien być umieszczony slash - "/". Przykłady:

font: italic normal bold small/2em Arial, Helvetica, sans-serif;
font: 12pt/3em Arial, sans-serif;
font: normal small-caps 101%/140% monospace;

-- 
[Krzysztof Sawicki ksawicki(a)post.pl http://www.antylameriada.boo.pl/]
[GSM 011000000000011000001000000000000111 JID: ksawicki(a)jabberpl.org]
[Dział Webmastering w @t http://www.at.w.pl/      Skierniewice, Poland]